<template>
<div class="home"> 
  <div class="top">
    <el-row :gutter="10">
    <el-col :xs="24" :sm="12" :lg="6">
      <div class="one"></div>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="6">
      <div class="two"></div>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="6">
      <div class="three"></div>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="6">
      <div class="four"></div>
    </el-col>
    </el-row>
  </div>
  <div class="echarts">
    <el-row :gutter="10" class="row">
      <el-col :sm='24' :lg='12'>
        <ve-line :data='lineData'></ve-line>
      </el-col>
      <el-col :sm='24' :lg='12'>
        <ve-pie :data='pieData'></ve-pie>
      </el-col>
    </el-row>
  </div>
  <div class="table">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop='name' label="姓名" align='center' width="180"></el-table-column>
      <el-table-column prop='age' label="年龄" align='center' width="180" :sortable='true'></el-table-column>
      <el-table-column prop='address' label="地址" align='center' width="240"></el-table-column>
      <el-table-column prop='date' label="日期" align='center' width="180"></el-table-column>
      <el-table-column label="操作" align='center'>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
   
  </div>
</div>
</template>

<script>
export default {
    data() {
      return {
        lineData: {
          columns: ['日期', '访问用户', '下单用户', '下单率'],
          rows: [
            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
          ]
        },
        pieData: {
          columns: ['日期', '访问用户'],
          rows: [
            { '日期': '1/1', '访问用户': 1393 },
            { '日期': '1/2', '访问用户': 3530 },
            { '日期': '1/3', '访问用户': 2923 },
            { '日期': '1/4', '访问用户': 1723 },
            { '日期': '1/5', '访问用户': 3792 },
            { '日期': '1/6', '访问用户': 4593 }
          ]
        },
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          age:'33',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          age:'42',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          age:'18',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          age:'22',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    methods: {
       handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
};
</script>
<style lang="less" scoped>
.top{
  // width: 100%;
  margin-top: 10px;
  padding:0 10px;
  // box-sizing: border-box;
   .one {
    height: 100px;
    background-color: #adff2f;
    margin-bottom: 10px;
  }
  .two {
    height: 100px;
    background-color: #9acd32;
    margin-bottom: 10px;
  }
  .three {
    height: 100px;
    background-color: #a52a2a;
    margin-bottom: 10px;
  }
  .four {
    height: 100px;
    background-color: #ffc0cb;
    margin-bottom: 10px;
  }
}
.echarts{
  // width: 100%;
  // box-sizing: border-box;
  padding: 0 20px;
  // .row{
  //   width: 100%;
  // }
}
 .table{
   width: 100%;
  //  height: 500px;
  //  background-color: blue;
 }
</style>